<template>
  <div class="login-warp">
    <h1 style="margin-top: 10px">供应商中心</h1>
    <el-container>
      <el-main>
        <div id="table">
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            :data="pageData"
            stripe
            border
            height="700"
            style="width: 100%;height: 100% ;">
            <el-table-column
              prop="sid"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="supplierNo"
              label="供应商编号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商名称"
              width="340">
            </el-table-column>
            <el-table-column
              prop="linkPerson"
              label="联系人"
              width="100">
            </el-table-column>
            <el-table-column
              prop="linkPhone"
              label="联系方式"
              width="150">
            </el-table-column>
            <el-table-column
              prop="linkAddr"
              label="联系地址"
              width="350">
            </el-table-column>
            <el-table-column
              prop="areaName"
              label="所属区域"
              width="280">
            </el-table-column>
            <el-table-column
              prop="fax"
              label="传真">
            </el-table-column>
            <el-table-column>
              <label="操作">
              <template slot-scope="scope" v-if="status==='1'">
                <el-button type="text" size="small" @click="changeF( scope.row )">编辑</el-button>
                <el-button type="text" :disabled="scope.row.status===0"  @click="changeStatus( scope.row,0 )" size="small">禁用</el-button>
                <el-button type="text" :disabled="scope.row.status===1"  @click="changeStatus( scope.row,1 )" size="small">启用</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            background
            @current-change="pageChange"
            :current-page.sync="currentPage"
            :total='dataNum'>
          </el-pagination>
        </div>
      </el-main>
      <el-footer>
        <el-col :span="4" :offset="20"><el-button type="primary" @click="createsup()">创建供应商</el-button></el-col>
      </el-footer>
    </el-container>
    <el-dialog title="修改供应商信息" :visible.sync="ifchange">
      <el-form :model="changeForm" ref="changeForm" :rules="rules">
        <el-form-item label="联系人" prop="linkPerson">
          <el-input v-model="changeForm.linkPerson"  placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="linkPhone">
          <el-input oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                    v-model="changeForm.linkPhone"  placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="linkPhone">
          <el-input v-model="changeForm.linkAddr"  placeholder="请输入联系地址"></el-input>
        </el-form-item>
        <el-form-item label="传真"  prop="fax">
          <el-input oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                    v-model="changeForm.fax"></el-input>
        </el-form-item>
        <el-form-item label="发票信息"  prop="invoiceInfo">
          <el-input v-model="changeForm.invoiceInfo"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="changeForm.remarks" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifchange = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "suppliers",
      inject:['reload'],
      data(){
        return {
          loading: true,
          data: [],
          pageData:[],
          status:'',
          dataNum:0,
          currentPage:1,
          ifchange:false,
          changeForm:{
            supplierNo:'',
            supplierName:'',
            linkPerson:'',
            linkPhone:'',
            linkAddr:'',
            fax:'',
            invoiceInfo:'',
            remarks:'',
          },
          rules: {
            supplierName: [
              {required: true, message: '请输入供应商名称', trigger: 'blur'},
            ],
            linkPerson: [
              {required: true, message: '请输入联系人', trigger: 'blur'},
            ],
            linkPhone: [
              {required: true, message: '请输入联系方式', trigger: 'blur'},
            ],
            linkAddr: [
              {required: true, message: '请输入联系地址', trigger: 'blur'},
            ]
          }
        }
      },
      beforeRouteEnter(to, form, next) {
        next()
        this.xuanran()
      },
      created(){
        this.status=localStorage.getItem("status")
        this.xuanran()
      },
      methods:{
        pageChange(val){
          this.loading=true;
          let pageNo=this.currentPage
          this.pageData=[]
          for(let i=(pageNo-1)*10;i<(pageNo*10>this.dataNum?this.dataNum:pageNo*10);i++){
            this.pageData.push(this.data[i])
          }
          setTimeout(()=>{
            this.loading=false
          },400);
        },
        xuanran(){
          this.$http.get("/hnhyscms_ws/suppliers/getAllSuppliers",{emulateJSON:true}).then(
            success=>{
              this.data=success.data
              this.dataNum=success.data.length
              this.pageChange()
            }
          )
        },
        createsup(){
          this.$router.push({
            path:"/createsupplier"
          })
        },
        changeF(item){
          this.changeForm={
            supplierNo:item.supplierNo,
            supplierName:item.supplierName,
            linkPerson:item.linkPerson,
            linkPhone:item.linkPhone,
            linkAddr:item.linkAddr,
            fax:item.fax,
            invoiceInfo:item.invoiceInfo,
            remarks:item.remarks,
          }
          this.ifchange=true
        },
        change(){
          this.$refs['changeForm'].validate((valid) => {
            if (valid) {
              let params={
                ...this.changeForm,
              }
              this.$http.post("/hnhyscms_ws/suppliers/changeBySupplierNo",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.ifchange=false
                  this.reload();
                }
              )
            }
            })
        },
        changeStatus(item,status){
          let params={
            supplierNo:item.supplierNo,
            status:status
          }
          this.$http.post("/hnhyscms_ws/suppliers/changeStatus",params,{emulateJSON:true}).then(
            success=>{
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.reload();
            }
          )
        },
      }
    }
</script>

<style scoped>

</style>
